<template>
  <div class="">
    <div class="mxzstool">
      <div class="tool" @click="back()">
        <img src="@/images/fhmt.png" alt="" class="normal" />
        <img src="@/images/fhmtac.png" alt="" class="active" />
      </div>
      <div class="tool" @click="mtstart()">
        <img src="@/images/sy.png" alt="" class="normal" />
        <img src="@/images/syac.png" alt="" class="active" />
      </div>
    </div>

    <div ref="changj" class="changj"></div>
    <div class="ckimg">
      <img
        src="@/images/ckh.png"
        alt=""
        v-if="mxmtnumber == 'ShuiMo_hao.glb'"
      />
      <img src="@/images/ckhs.png" alt="" v-else />
    </div>
  </div>
</template>

<script>
// import * as dat from 'dat.gui'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
export default {
  props: {
    mxmtnumber: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      baseURL: 'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/ctxn/',
      loading: true,
      maincontWidth: 0,
      maincontHeight: 0,
      maincontSc: 0,
      camera: null,
      scene: null,
      renderer: null,
      objectReItem: null,
      controls: null,
      newcontrols: null,
      clock: null,
      raycaster: null,
      mouse: null,
      //cameraOriginal: [1, 0.5, 6.876],
      cameraOriginal: [1, 0.5, -0.3],
      objects: []
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.$el.removeEventListener('mousemove', this.onDocumentMouseMove, false)
    this.$el.removeEventListener('click', this.onDocumentMouseDown, false)
  },
  methods: {
    // 使用模体
    mtstart() {
      if (this.mxmtnumber == 'ShuiMo_hao.glb') {
        this.$emit('mtstart', 1)
      } else {
        this.$emit('mtstart', 2)
      }
    },
    // 返回
    back() {
      this.$emit('back')
    },
    init() {
      this.$nextTick(() => {
        this.maincontWidth = this.$refs.changj.offsetWidth
        this.maincontHeight = this.$refs.changj.offsetHeight
        this.maincontSc = this.maincontWidth / this.maincontHeight
        this.clock = new THREE.Clock()
        this.mouse = new THREE.Vector2()
        this.raycaster = new THREE.Raycaster()
        this.initScene()
      })
    },
    initScene() {
      let scene = new THREE.Scene()
      scene.background = null
      this.scene = scene
      this.initLight() //灯光
      this.initCamera() //相机
      this.initRenderer() //加载器
      this.initControl()
      this.animate() //刷新场景
      this.initFile() //添加临时盒子
      // this.zx()
      //控制器（不需要可屏蔽）
    },
    initLight() {
      const ambientLight = new THREE.AmbientLight(0xffffff, 1)
      this.scene.add(ambientLight)
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4)
      directionalLight.position.set(5, 5, 5)
      directionalLight.castShadow = true
      directionalLight.shadow.camera.top = 10
      directionalLight.shadow.camera.bottom = 10
      directionalLight.shadow.camera.left = 10
      directionalLight.shadow.camera.right = -10
      this.scene.add(directionalLight)
    },
    initCamera() {
      let camera = new THREE.PerspectiveCamera(35, this.maincontSc, 0.1, 1000)
      // 设置相机位置

      if (this.mxmtnumber == 'ShuiMo_hao.glb') {
        camera.position.set(0.9, 1.6, -0.21)
        console.log(camera.position)
      } else {
        camera.position.set(0.9, 1.6, -0.21)
      }
      camera.lookAt(0, 0, 0)
      this.camera = camera

      this.scene.add(this.camera)
      // const gui = new dat.GUI()
      // const cameraFolder = gui.addFolder('相机位置')

      // // 定义相机位置的参数
      // const cameraPosition = {
      //   x: this.camera.position.x,
      //   y: this.camera.position.y,
      //   z: this.camera.position.z
      // }

      // // 添加相机位置的控件
      // cameraFolder.add(cameraPosition, 'x', -10, 10).onChange(() => {
      //   this.camera.position.x = cameraPosition.x
      // })
      // cameraFolder.add(cameraPosition, 'y', -10, 10).onChange(() => {
      //   this.camera.position.y = cameraPosition.y
      // })
      // cameraFolder.add(cameraPosition, 'z', -10, 10).onChange(() => {
      //   this.camera.position.z = cameraPosition.z
      // })
    },
    initRenderer() {
      let renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      })
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(this.maincontWidth, this.maincontHeight)
      renderer.shadowMap.enabled = true
      renderer.shadowMap.type = THREE.PCFShadowMap
      renderer.outputEncoding = THREE.SRGBColorSpace
      this.renderer = renderer
      // this.$el.appendChild(this.renderer.domElement)
      this.$refs.changj.appendChild(this.renderer.domElement)
      // window.addEventListener('resize', this.onWindowResize)
    },
    // onWindowResize() {
    //   this.maincontWidth = this.$refs.changj.offsetWidth
    //   this.maincontHeight = this.$refs.changj.offsetHeight
    //   this.maincontSc = this.maincontWidth / this.maincontHeight
    //   this.camera.aspect = this.maincontSc
    //   this.camera.updateProjectionMatrix()
    //   this.renderer.setSize(this.maincontWidth, this.maincontHeight)
    // },
    initFile() {
      let that = this
      let gltf_loader = new GLTFLoader()
      const dracoLoader = new DRACOLoader()
      // dracoLoader.setDecoderPath('/draco/')
      dracoLoader.setDecoderPath(window.config.VUE_GLB_Base_load)

      dracoLoader.preload()
      gltf_loader.setDRACOLoader(dracoLoader)
      //加载模型
      gltf_loader.load(
        window.config.VUE_GLB_Base + this.mxmtnumber,
        function (glat) {
          that.loading = false
          let objectReItem = glat.scene

          objectReItem.traverse(function (child) {
            if (child.isMesh) {
              child.castShadow = true
              child.receiveShadow = true
              //

              if (that.mxmtnumber == 'ShuiMo_hao.glb') {
                child.scale.multiplyScalar(1.6, 1.6, 1.6)
              } else {
                child.scale.multiplyScalar(1.6, 1.6, 1.6)
              }
            }
          })
          // const gui = new dat.GUI()
          // const modelFolder = gui.addFolder('模型位置')

          // const modelParams = {
          //   position: {
          //     x: 0,
          //     y: 0,
          //     z: 0
          //   },
          //   rotation: {
          //     x: 0,
          //     y: 0,
          //     z: 0
          //   }
          // }

          // // 添加模型位置的控件
          // const positionFolder = modelFolder.addFolder('位置')
          // positionFolder.add(modelParams.position, 'x', -10, 10).onChange(() => {
          //   objectReItem.position.x = modelParams.position.x
          // })
          // positionFolder.add(modelParams.position, 'y', -10, 10).onChange(() => {
          //   objectReItem.position.y = modelParams.position.y
          // })
          // positionFolder.add(modelParams.position, 'z', -10, 10).onChange(() => {
          //   objectReItem.position.z = modelParams.position.z
          // })

          // // 添加模型旋转的控件
          // const rotationFolder = modelFolder.addFolder('旋转')
          // rotationFolder
          //   .add(modelParams.rotation, 'x', 0, Math.PI * 2)
          //   .onChange(() => {
          //     objectReItem.rotation.x = modelParams.rotation.x
          //   })
          // rotationFolder
          //   .add(modelParams.rotation, 'y', 0, Math.PI * 2)
          //   .onChange(() => {
          //     objectReItem.rotation.y = modelParams.rotation.y
          //   })
          // rotationFolder
          //   .add(modelParams.rotation, 'z', 0, Math.PI * 2)
          //   .onChange(() => {
          //     objectReItem.rotation.z = modelParams.rotation.z
          //   })

          if (that.mxmtnumber == 'ShuiMo_hao.glb') {
            objectReItem.rotation.y = 1.8
            console.log(' objectReItem.rotation.y', objectReItem.rotation.y)
          } else {
            objectReItem.rotation.y = 1.8
          }
          that.scene.add(objectReItem)
        }
      )
    },
    onDocumentMouseMove(event) {
      event.preventDefault()

      let maincontWidth = this.$refs.changj.offsetWidth
      let maincontHeight = this.$refs.changj.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      const intersections = this.raycaster.intersectObjects(this.objects)
      if (intersections.length > 0) {
        document.body.style.cursor = 'pointer'
      } else {
        document.body.style.cursor = 'initial'
      }
    },
    onDocumentMouseDown(event) {
      event.preventDefault()

      let maincontWidth = this.$refs.changj.offsetWidth
      let maincontHeight = this.$refs.changj.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      //   const intersections = this.raycaster.intersectObjects(this.objects)
      //   if (intersections.length > 0) {
      //     this.$emit('clickItem', intersections[0].object.name)
      //   }
    },

    initControl() {
      this.$el.addEventListener('mousemove', this.onDocumentMouseMove, false)
      this.$el.addEventListener('click', this.onDocumentMouseDown, false)
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.maxDistance = 2
    },
    zx() {
      var offset = null

      offset = new THREE.Vector3(0, 0, 0)
      offset.applyEuler(this.camera.rotation)
      this.controls.target.copy(this.camera.position).sub(offset)
    },
    animate() {
      requestAnimationFrame(this.animate)

      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>
